export function loadImage(url) {
    var _iamge = new Image()
    _iamge.crossOrigin = "Anonymous"
    _iamge.src = url
    return new Promise(resolve => {
        _iamge.onload = () => {
            resolve(_iamge)
        }
    })
}

export function canvas2imageSrc(canvas) {
    return canvas.toDataURL("image/png");
}

export async function mergerImage(productImageSrc, designImageSrc) {
    var dom = document.createElement('canvas')
    var ctx = dom.getContext("2d")
    var fabricImage = await  loadImage(designImageSrc)
    var productImage = await  loadImage(productImageSrc)
    dom.width = productImage.width
    dom.height = productImage.height
    var pat = ctx.createPattern(fabricImage, "repeat");
    ctx.rect(0, 0, productImage.width, productImage.height);
    ctx.fillStyle = pat;
    ctx.fill();
    ctx.drawImage(productImage, 0, 0, productImage.width, productImage.height);
    var finalImageSrc = canvas2imageSrc(dom)
    return finalImageSrc
}

